<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时天气仪表盘</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@1.4.0/dist/axios.min.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="../CSS/index.css">
</head>
<body class="font-inter bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen animated-bg">
    <div class="container mx-auto px-4 py-8 max-w-7xl">
        <!-- 顶部导航栏 -->
        <header class="flex justify-between items-center mb-8 glass-effect rounded-xl p-4">
            <div class="flex items-center space-x-3">
                <i class="fa fa-cloud text-primary text-3xl"></i>
                <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral-dark">天气<span class="text-primary">仪表盘</span></h1>
            </div>
            <div class="flex items-center space-x-4">
                <div class="relative">
                    <input id="location-search" type="text" placeholder="搜索城市..." 
                           class="pl-10 pr-4 py-2 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50 w-[clamp(150px,25vw,300px)]">
                    <i class="fa fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>
                <button id="search-btn" class="ml-2 px-4 py-2 bg-primary text-white rounded-full hover:bg-primary/90">
                    <i class="fa fa-search mr-1"></i>搜索
                </button>
                <button id="location-btn" class="p-2 rounded-full bg-primary/10 text-primary hover:bg-primary/20">
                    <i class="fa fa-map-marker"></i>
                </button>
                <div class="relative">
                    <button id="theme-toggle" class="p-2 rounded-full bg-gray-100 hover:bg-gray-200">
                        <i class="fa fa-moon-o text-gray-600"></i>
                    </button>
                </div>
            </div>
        </header>

        <!-- 主要内容区 -->
        <main class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- 当前天气卡片 -->
            <section class="lg:col-span-2 space-y-6">
                <div id="current-weather" class="weather-card relative overflow-hidden">
                    <div class="absolute top-0 right-0 w-40 h-40 bg-primary/10 rounded-full -mr-10 -mt-10"></div>
                    <div class="absolute bottom-0 left-0 w-24 h-24 bg-secondary/10 rounded-full -ml-6 -mb-6"></div>
                    
                    <div class="flex flex-col md:flex-row md:items-center justify-between relative z-10">
                        <div class="mb-6 md:mb-0">
                            <div class="flex items-center space-x-2 mb-2">
                                <h2 id="location-name" class="text-2xl font-bold text-neutral-dark">北京市</h2>
                                <span id="weather-icon" class="text-4xl">☀️</span>
                            </div>
                            <p id="weather-description" class="text-gray-600 mb-4">晴朗</p>
                            <div class="flex items-end space-x-2">
                                <span id="current-temp" class="text-[clamp(3rem,8vw,5rem)] font-bold text-neutral-dark">25°</span>
                                <div class="mb-2">
                                    <p id="temp-range" class="text-lg">20° ~ 28°</p>
                                    <p id="feels-like" class="text-gray-600">体感温度: 26°</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="grid grid-cols-2 sm:grid-cols-3 gap-4 w-full md:w-auto">
                            <div class="scale-hover bg-blue-50 rounded-lg p-3 text-center">
                                <i class="fa fa-tint text-primary text-xl mb-1"></i>
                                <p class="text-sm text-gray-500">湿度</p>
                                <p id="humidity" class="font-semibold text-neutral-dark">45%</p>
                            </div>
                            <div class="scale-hover bg-blue-50 rounded-lg p-3 text-center">
                                <i class="fa fa-wind text-primary text-xl mb-1"></i>
                                <p class="text-sm text-gray-500">风速</p>
                                <p id="wind-speed" class="font-semibold text-neutral-dark">3.5 km/h</p>
                            </div>
                            <div class="scale-hover bg-blue-50 rounded-lg p-3 text-center">
                                <i class="fa fa-sun-o text-primary text-xl mb-1"></i>
                                <p class="text-sm text-gray-500">紫外线</p>
                                <p id="uv-index" class="font-semibold text-neutral-dark">6 (高)</p>
                            </div>
                            <div class="scale-hover bg-blue-50 rounded-lg p-3 text-center">
                                <i class="fa fa-cloud text-primary text-xl mb-1"></i>
                                <p class="text-sm text-gray-500">云量</p>
                                <p id="cloud-cover" class="font-semibold text-neutral-dark">10%</p>
                            </div>
                            <div class="scale-hover bg-blue-50 rounded-lg p-3 text-center">
                                <i class="fa fa-thermometer-half text-primary text-xl mb-1"></i>
                                <p class="text-sm text-gray-500">气压</p>
                                <p id="pressure" class="font-semibold text-neutral-dark">1013 hPa</p>
                            </div>
                            <div class="scale-hover bg-blue-50 rounded-lg p-3 text-center">
                                <i class="fa fa-eye text-primary text-xl mb-1"></i>
                                <p class="text-sm text-gray-500">能见度</p>
                                <p id="visibility" class="font-semibold text-neutral-dark">10 km</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 小时预报 -->
                <div class="weather-card">
                    <h3 class="text-xl font-bold text-neutral-dark mb-4">24小时预报</h3>
                    <div class="overflow-x-auto pb-2">
                        <div id="hourly-forecast" class="flex space-x-4 min-w-max">
                            <!-- 小时预报内容将通过JavaScript动态生成 -->
                        </div>
                    </div>
                </div>

                <!-- 温度趋势图 -->
                <div class="weather-card">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-xl font-bold text-neutral-dark">7天趋势</h3>
                        <div class="flex space-x-2">
                            <button class="temp-trend-btn px-3 py-1 rounded-full text-sm bg-primary text-white">温度</button>
                            <button class="precip-trend-btn px-3 py-1 rounded-full text-sm bg-gray-100 text-gray-600">降水</button>
                            <button class="wind-trend-btn px-3 py-1 rounded-full text-sm bg-gray-100 text-gray-600">风速</button>
                        </div>
                    </div>
                    <div class="h-80">
                        <canvas id="trend-chart"></canvas>
                    </div>
                </div>
            </section>

            <!-- 侧边栏 -->
            <section class="space-y-6">
                <!-- 日出日落卡片 -->
                <div class="weather-card">
                    <h3 class="text-xl font-bold text-neutral-dark mb-4">日出日落</h3>
                    <div class="relative h-40 mb-4">
                        <div id="sun-path" class="sun-path w-full h-full">
                            <div id="sun" class="sun"></div>
                            <div id="moon" class="moon hidden"></div>
                            <div class="absolute bottom-0 left-0 right-0 h-px bg-gray-200"></div>
                            <div class="absolute bottom-0 left-0 w-px h-20 bg-gray-200"></div>
                            <div class="absolute bottom-0 right-0 w-px h-20 bg-gray-200"></div>
                            <div class="absolute bottom-[-15px] left-0 text-xs text-gray-500">日出</div>
                            <div class="absolute bottom-[-15px] right-0 text-xs text-gray-500">日落</div>
                        </div>
                    </div>
                    <div class="grid grid-cols-2 gap-4">
                        <div class="bg-orange-50 rounded-lg p-3 text-center">
                            <i class="fa fa-sun-o text-orange-500 text-2xl mb-1"></i>
                            <p class="text-sm text-gray-500">日出</p>
                            <p id="sunrise-time" class="font-semibold text-neutral-dark">05:42</p>
                        </div>
                        <div class="bg-red-50 rounded-lg p-3 text-center">
                            <i class="fa fa-moon-o text-red-500 text-2xl mb-1"></i>
                            <p class="text-sm text-gray-500">日落</p>
                            <p id="sunset-time" class="font-semibold text-neutral-dark">19:38</p>
                        </div>
                    </div>
                </div>

                <!-- 空气质量卡片 -->
                <div class="weather-card">
                    <h3 class="text-xl font-bold text-neutral-dark mb-4">空气质量指数</h3>
                    <div class="relative h-40 mb-4">
                        <canvas id="aqi-chart"></canvas>
                    </div>
                    <div class="flex justify-between items-center">
                        <div>
                            <p class="text-sm text-gray-500">当前空气质量</p>
                            <p id="aqi-value" class="text-3xl font-bold text-success">32</p>
                            <p id="aqi-status" class="text-success font-medium">优</p>
                        </div>
                        <div class="w-24 h-24 rounded-full bg-success/20 flex items-center justify-center">
                            <i class="fa fa-leaf text-3xl text-success"></i>
                        </div>
                    </div>
                </div>

                <!-- 未来7天预报 -->
                <div class="weather-card">
                    <h3 class="text-xl font-bold text-neutral-dark mb-4">7天预报</h3>
                    <div id="daily-forecast" class="space-y-3">
                        <!-- 未来7天预报内容将通过JavaScript动态生成 -->
                    </div>
                </div>

                <!-- 天气提醒卡片 -->
                <div id="weather-alert-card" class="weather-card">
                    <div class="flex items-start space-x-3">
                        <div id="alert-icon-container" class="bg-primary/20 p-2 rounded-full text-primary">
                            <i id="alert-icon" class="fa fa-bell"></i>
                        </div>
                        <div>
                            <h4 id="alert-title" class="font-semibold text-neutral-dark">天气提醒</h4>
                            <p id="weather-alert" class="text-sm text-gray-600 mt-1">今日天气晴朗，适合户外活动。</p>
                        </div>
                    </div>
                </div>
            </section>
        </main>

        <!-- 页脚 -->
        <footer class="mt-12 text-center text-gray-500 text-sm">
            <p>© 2025 天气仪表盘 | 数据来源: OpenWeatherMap API</p>
            <p class="mt-2">最后更新时间: <span id="last-update">2025-05-24 12:30</span></p>
        </footer>
    </div>

    <!-- 加载中模态框 -->
    <div id="loading-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white p-6 rounded-xl flex flex-col items-center">
            <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary mb-4"></div>
            <p class="text-neutral-dark font-medium">正在获取天气数据...</p>
        </div>
    </div>

    <script src="../JS/all.js"></script>
</body>
</html>